<template>
	<view class="news_list">
		<view class="list_title">
			<view class="treetop"></view>
			<text>动态资讯/Company Updates</text>
			<!-- <view class="news_more">
				<view class="news_view">
					<text>更多</text>
					<text class="iconfont icon-gengduozixun"></text>
				</view>
			</view> -->
		</view>
		<view class="list_ul">
			<view class="list_li" v-for="(exit,index) in listData" :key="index" @click="clickDetails(exit)">
				<view class="list_img">
					<view class="list_view">
						<image :src="exit.poster" mode="aspectFill"></image>
					</view>
				</view>
				<view>
					<view class="newsTitle">{{exit.title}}</view>
					<view class="newsTime">{{formatToDate(exit.create_date)}}</view>
				</view>
			</view>
		</view>
		<view class="paging">
			<uni-pagination :current="current" :total="total" :show-icon="true" @change="change" />
		</view>
	</view>
</template>

<script>
	import {
		getDataList
	} from '../../utils/http_data.js';
	import {formatMillisecondsToDateTime} from '../../utils/common.js';
	export default {
		name: "newsList",
		data() {
			return {
				current: 1, // 当前页
				total: 0, // 数据总共条数
				pageSize: 9, // 每页数量
				listData: [], // 新闻数据
				detailsExit: null, // 当前选中的新闻数据
			};
		},
		mounted() {
			this.getDataListfun(this.current, this.pageSize)
		},
		methods: {
			// 转换年月日时分秒
			formatToDate(val) {
				return formatMillisecondsToDateTime(val)
			},
			// 获取新闻数据
			getDataListfun(current, pageSize) {
				getDataList({
					page: current,
					pageSize: pageSize
				}).then((data) => {
					console.log(data);
					this.total = data.count
					this.listData = data.data;
				})
			},
			change(e) {
				console.log(e)
				this.current = e.current
				this.getDataListfun(this.current, this.pageSize)
			},
			clickDetails(val) {
				this.detailsExit = val;
				uni.navigateTo({
					url: '/pages/dynamic-details/dynamic-details?_id=' + val._id
				});
			}
		}
	}
</script>

<style scoped>
	.news_list {
		width: 1360px;
		margin: 0 auto;
	}

	.list_title {
		width: 100%;
		height: 60px;
		line-height: 90px;
		display: flex;
		font-size: 16px;
		font-weight: 400;
	}

	.treetop {
		width: 5px;
		height: 15px;
		background-color: #D9001B;
		margin-top: 38px;
		margin-right: 6px;
	}

	.news_more {
		/* margin-left: 100px; */
		flex: 1;
		text-align: end;
		padding-right: 24px;
	}

	.news_view {
		width: 80px;
		float: right;
		cursor: pointer;
	}

	.news_view:hover {
		color: #D9001B;
	}

	.list_ul {
		width: 1360px;
		/* height: 640px; */
		/* background-color: aqua; */
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
		margin: auto;
		/* overflow: hidden; */
	}

	.list_li {
		width: 430px;
		background-color: #F5F5F5;
		border-radius: 8px;
		height: 400px;
		margin-bottom: 40px;
		cursor: pointer;
		margin: 10px;
	}

	/* .list_li:nth-child() {} */

	.list_img {
		width: 100%;
	}

	.list_view {
		width: 100%;
		height: 240px;
		/* margin: auto; */
		box-sizing: border-box;
		border-radius: 6px;
		overflow: hidden;
	}

	.list_li image {
		width: 100%;
		height: 100%;
		border-radius: 6px;
		/* transform: scale(1); */
	}

	.list_li image:hover {
		/* transform:scale(1.2); */
		animation: pulse 1s forwards;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}


	.newsTitle {
		width: 100%;
		color: #333;
		line-height: 40px;
		font-size: 16px;
		font-weight: 600;
		display: inline-block;
		padding: 20px;
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.newsTime {
		width: 100%;
		color: #666;
		font-size: 14px;
		padding: 4px 20px;
		box-sizing: border-box;
	}

	.list_li:hover .newsTitle {
		color: #C01C22;
	}

	.paging {
		width: 100%;
		height: 60px;
		/* background-color: aquamarine; */
		margin-bottom: 20px;
	}
</style>